<template>
  <div>
    <customSearch ref="customSearch" placeholder="请输入企业名称" title="报警列表" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
    <div class="d-flex mt-2 w-100">
      <custom-radio-tag1 class="mb-1 w-100" :list="list" :value="index" is-scroll @change="tagChange" />
    </div>
    <div>
      <div v-if="listData.length > 0" class="common_list">
        <div v-for="(item, ind) in listData" :key="ind" class="list_item" @click="goToDetails(item)">
          <div class="content_area">
            <div class="number_order">{{ ind + 1 }}</div>
            <div v-if="active === '视频报警'" class="right_content video_list_item" :style="{ backgroundImage: `url(${item.screenshots !== '/'?item.screenshots:videoImg})` }">
              <div class="content_title" style="max-width: 100%">
                <b>{{ item.eventType }}</b>
                <span>{{ item.alarmStatus }}</span>
              </div>
              <ul>
                <li>
                  <i class="iconfont c-text-color1">&#xe725;</i>
                  <div class="value">{{ item.companyName }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color2">&#xe6bb;</i>
                  <div class="label">监控区域：</div>
                  <div class="value">{{ item.monitorRegion }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color3">&#xe634;</i>
                  <div class="label">设备编号：</div>
                  <div class="value">{{ item.cameraCode }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color4">&#xe67a;</i>
                  <div class="label">报警时间：</div>
                  <div class="value">{{ item.alarmTime }}</div>
                </li>
              </ul>
            </div>
            <div v-else class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.companyName }}
                <el-tag
                  :type="item.alarmStatus === '已解除' ? 'success' : 'danger'"
                ><span style="font-size: 14px">{{ item.alarmStatus }}</span></el-tag>
              </div>
              <ul>
                <li>
                  <i class="iconfont c-text-color1">&#xe611;</i>
                  <div class="label">报警类别：</div>
                  <div class="value">{{ item.eventType }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color2">&#xe634;</i>
                  <div class="label">报警级别：</div>
                  <div class="value">{{ item.alarmLevel }}</div>
                </li>
                <li>
                  <i class="iconfont c-text-color3">&#xe685;</i>
                  <div class="label">报警时间：</div>
                  <div class="value">{{ item.alarmTime }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
    </div>
    <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <custom-timer1 title="报警时间" type="datetime" :start.sync="form.sTime" :end.sync="form.eTime" />
          <template v-if="active === '视频报警'">
            <!-- <customPopCheckbox :list="eventType" :check-value.sync="form.eventType" title="报警类型" /> -->
            <!-- <customPopCheckbox :list="selectOptionAll['报警状态']" :check-value.sync="form.alarmStatus" title="报警状态" /> -->
            <!-- <customPopCheckbox :list="selectOptionAll['报警预警级别']" :check-value.sync="form.alarmLevel" title="报警级别" /> -->
            <!-- <customPopCheckbox :list="selectOptionAll['是否']" :check-value.sync="form.falseAlarm" title="是否误报" />
            <customPopCheckbox :list="selectOptionAll['是否']" :check-value.sync="form.handleStatus" title="是否生成处置任务" /> -->
          </template>
          <template v-if="active === '传感器报警'">
            <customPopCheckbox :list="selectOptionAll['安全-传感器报警类别']" :check-value.sync="form.eventType" title="报警类别" />
            <!-- <customPopCheckbox :list="selectOptionAll['报警状态']" :check-value.sync="form.alarmStatus" title="报警状态" /> -->
            <customPopCheckbox :list="selectOptionAll['安全-传感器报警预警级别']" :check-value.sync="form.alarmLevel" title="报警级别" />
            <!-- <customPopCheckbox :list="selectOptionAll['是否']" :check-value.sync="form.falseAlarm" title="是否误报" />
            <customPopCheckbox :list="selectOptionAll['是否']" :check-value.sync="form.handleStatus" title="是否生成处置任务" /> -->
          </template>
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// import { companyList } from '@/api/enterprise'
// import customTimer from '@/components/common/custom-timer.vue'
import commonList from '@/assets/mixin/commonList'
import { aqMonitorAlarmList, aqVideoAlarmList, getAqVideoEventType } from '@/api/commonPage/AlarmManagement'
import videoImg from '@/assets/images/common/video.jpg'
import { prevTime } from '@/utils/dayJs'
import customTimer1 from '@/components/common/custom-timer1.vue'
export default {
  components: {
    customTimer1
  },
  mixins: [commonList],
  data() {
    return {
      videoImg,
      index: 0,
      active: '视频报警',
      form: {
        pageNum: 1,
        pageSize: 10,
        alarmLevel: '',
        alarmStatus: '',
        companyIds: '-1',
        companyName: '',
        // eTime: '',
        // sTime: '',
        // starTime: prevTime('年月日时分秒', 1, 'M'),
        // endTime: currentTime('年月日时分秒'),
        // eTime: currentTime('年月日时分秒'),
        // sTime: prevTime('年月日时分秒', 1, 'M'),
        starTime: '',
        endTime: '',
        eTime: '',
        sTime: '',
        eventType: '',
        falseAlarm: '',
        handleStatus: '',
        reportStatus: '',
        systemType: '',
        alarmSource: '',
        source: '-1'
      },
      list: [
        {
          label: '视频报警',
          listFun: aqVideoAlarmList
        },
        {
          label: '传感器报警',
          listFun: aqMonitorAlarmList
        }
      ],
      listFun: aqVideoAlarmList,
      current: '',
      listData: [],
      eventType: [],
      tagChangeFirstLoading: true,
      firstLoad: true,
      defaultTime: {
        sTime: '',
        eTime: ''
      }
    }
  },
  watch: {
    'form.sTime'(new_) {
      this.form.starTime = new_
    },
    'form.eTime'(new_) {
      this.form.endTime = new_
    }
  },
  mounted() {
    getAqVideoEventType().then(({ data, status }) => {
      if (status === 0 && data) {
        data.shift()
        this.eventType = data.map(val => ({ label: val.codeName, value: val.codeId }))
      }
    })
    const { current, active } = this.$route.query
    if (current) {
      this.current = current
    }
    if (active) {
      this.active = active
      this.list.map((v, ind) => {
        if (v.label === active) {
          this.index = ind
          this.listFun = v.listFun
        }
      })
    }
    this.companyList(true)
  },
  methods: {
    tagChange(tagArg) {
      this.index = tagArg.index
      this.active = tagArg.item.label
      this.listFun = tagArg.item.listFun
      this.resetSuperSearch()
      // this.form.sTime = this.form.starTime = prevTime('年月日时分秒', 1, 'M')
      // this.form.eTime = this.form.endTime = currentTime('年月日时分秒')

      this.form.sTime = this.form.starTime = ''
      this.form.eTime = this.form.endTime = ''
      this.tagChangeFirstLoading = true
      this.firstLoad = true
      this.companyList(true)
    },
    // 分页
    handlePages(value) {
      this.form.pageNum = value
      this.companyList()
    },
    // 企业名称查询
    handleSearch(value) {
      this.form.companyName = value
      this.form.pageNum = 1
      this.listData = []
      this.companyList(true)
    },
    // 高级查询
    handleSuperSearch() {
      this.superSearch = false
      this.form.pageNum = 1
      this.listData = []
      this.companyList(true)
    },
    // 级联选择器选择变化
    cascadeChange(args) {
      this.form.industryType = args.selectedOptions[args.selectedOptions.length - 1].text || ''
    },
    // 重置
    resetSuperSearch() {
      Object.keys(this.form).forEach((val) => {
        this.form[val] = ''
      })
      // 重置输入框查询
      this.$refs.customSearch.restore()
      this.form.pageNum = 1
      this.form.pageSize = 10
      this.form.companyIds = '-1'
      this.form.source = '-1'
      this.form.sTime = this.defaultTime.sTime
      this.form.eTime = this.defaultTime.eTime
    },
    // 跳转详情
    goToDetails(item) {
      const { monitorAlarmTd, videoAlarmId } = item
      this.$router.push({
        path: '/staging/AlarmManagementDetail',
        query: { id: monitorAlarmTd || videoAlarmId, current: this.current, active: this.active }
      })
    },
    // 返回工作台
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    // 获取企业列表数据
    async companyList(flag) {
      this.$refs.customLoadmore.loadStatus = true
      this.layout.showLoading()
      const { status, data } = await this.listFun({
        ...this.form
        // sTime: this.form.sTime ? this.form.sTime + ' 00:00:00' : '',
        // eTime: this.form.eTime ? this.form.eTime + ' 00:00:00' : '',
        // endTime: this.form.endTime ? this.form.endTime + ' 00:00:00' : '',
        // starTime: this.form.starTime ? this.form.starTime + ' 00:00:00' : ''
      })
      if (status === 0 && data) {
        this.total = data.total
        if (data.list[0]) {
          if (this.tagChangeFirstLoading || (this.form.sTime === '' && this.form.eTime === '')) {
            this.form.sTime = prevTime('年月日时分秒', 1, 'M', new Date(data.list[0].alarmTime))
            this.form.eTime = data.list[0].alarmTime
          }
          if (this.firstLoad) {
            this.defaultTime.sTime = prevTime('年月日时分秒', 1, 'M', new Date(data.list[0].alarmTime))
            this.defaultTime.eTime = data.list[0].alarmTime
            this.firstLoad = false
          }
        }
        data.list.map(val => {
          Object.keys(val).map(key => {
            val[key] = val[key] !== '' && val[key] !== undefined ? val[key] : '/'
          })
        })
        this.listData = flag ? data.list : this.listData.concat(data.list)
        this.pages = data.pages
      }
      this.tagChangeFirstLoading = false
      this.$refs.customLoadmore.loadStatus = false
      this.layout.hideLoading()
    }
  }
}
</script>

<style lang="scss" scoped>
.video_list_item {
  background: url('~@/assets/images/common/example.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 4.8rem;
  .content_title {
    padding: 10px;
    b,
    span {
      padding: 0 10px;
      background-color: rgba(0, 0, 0, 0.4);
      border: 0.0267rem solid #fff;
      font-weight: normal;
      font-size: 0.373rem;
      color: #fff;
    }
    b {
      background-color: rgba(252, 1, 1, 0.4);
    }
  }
  ul {
    background-color: rgb(15 57 105 / 29%);
    padding: 0.13333rem;
    color: #fff;
    li {
      margin-bottom: 0.133rem !important;
    }
  }
}
</style>
